﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Turf.js空间分析</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="jquery,bootstrap-css" src="../js/include-web.js"></script>
<script type="text/javascript" include="turf" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090",
        url = host + "/iserver/services/map-china400/rest/maps/ChinaDark",
        turfLayer, resultLayer, marker,
        notFirst = false,
        map = L.map('map', {
            preferCanvas: true,
            crs: L.CRS.EPSG4326,
            center: {lon: 5, lat: 7},
            maxZoom: 18,
            zoom: 6
        }),
        info = L.control({position: 'topleft'});
    info.onAdd = function () {
        var popup = L.DomUtil.create('div');
        popup.className = "menu";
        popup.innerHTML = "<select id='menuSelect' class='form-control'>" +
            "<option value='bboxClip' selected='selected'>bboxClip</option>" +
            "<option value='bezier'>bezier</option>" +
            "<option value='buffer'>buffer</option>" +
            "<option value='circle'>circle</option>" +
            "<option value='concave'>concave</option>" +
            "<option value='convex'>convex</option>" +
            "<option value='difference'>difference</option>" +
            "<option value='dissolve'>dissolve</option>" +
            "<option value='intersect'>intersect</option>" +
            "<option value='simplify'>simplify</option>" +
            "<option value='tesselate'>tesselate</option>" +
            "<option value='transformRotate'>transformRotate</option>" +
            "<option value='transformTranslate'>transformTranslate</option>" +
            "<option value='transformScale'>transformScale</option>" +
            "<option value='union'>union</option>" +
            "</select>";
        handleMapEvent(popup, map);
        return popup;
    };
    info.addTo(map);
    var baseLayer = L.supermap.tiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);

    map.on('layeradd', function (e) {
        if (!notFirst) {
            $('#menuSelect').change(function () {
                resetLayers();
                var func = eval($('#menuSelect').val());
                new func();
            });
        }
        notFirst = true;
    });

    resetLayers();
    bboxClip();

    function resetLayers() {
        map.eachLayer(function (layer) {
            if (baseLayer !== layer) {
                layer.removeFrom(map);
            }
        });
        turfLayer = L.supermap.turfLayer({
            attribution: " <span>© <a href='http://turfjs.org/' target='_blank'>turfjs</a></span>",
            style: function (feature) {
                return {
                    color: "rgb(0,153,255)",
                    opacity: 1,
                    fillColor: "rgb(0,153,255)",
                    fillOpacity: 0.1,
                    weight: 6
                };
            }
        }).addTo(map);
        resultLayer = L.supermap.turfLayer({
            attribution: "",
            style: function (feature) {
                return {
                    color: "rgb(178,34,34)",
                    opacity: 1,
                    fillColor: "rgb(178,34,34)",
                    fillOpacity: 0.3,
                    weight: 2
                };
            }
        }).bindPopup('空间分析结果').addTo(map);
    }

    function bboxClip() {
        map.setView(L.latLng(5, 7), 5);
        turfLayer.process("Helper.polygon", {
            "coordinates": [[[2, 2], [8, 4], [12, 8], [3, 7], [2, 2]]],
        }, function (polygon) {
            resultLayer.process("Transformation.bboxClip", {
                "feature": polygon,
                "bbox": [0, 0, 10, 10],
            });
        });
    }

    function bezier() {
        map.setView(L.latLng(19.5, -75), 7);
        turfLayer.process("Helper.lineString", {
            "coordinates": [[-76.091308, 18.427501],
                [-76.695556, 18.729501],
                [-76.552734, 19.40443],
                [-74.61914, 19.134789],
                [-73.652343, 20.07657],
                [-73.157958, 20.210656]],
        }, function (line) {
            resultLayer.process("Transformation.bezier", {
                "line": line,
            });
        });
    }

    function buffer() {
        map.setView(L.latLng(14.616599, -90.548630), 5);
        marker = L.marker([14.616599, -90.548630]).addTo(map);
        turfLayer.process("Helper.point", {
            anchor: [0.5, 1],
            "coordinates": [-90.548630, 14.616599],
        }, function (point) {
            resultLayer.process("Transformation.buffer", {
                "geojson": point,
                "radius": 500,
                "units": 'miles',
            });
        });
    }

    function circle() {
        map.setView(L.latLng(39.984, -75.343), 11);
        marker = L.marker([39.984, -75.343]).addTo(map);
        resultLayer.process("Transformation.circle", {
            "center": [-75.343, 39.984],
            "radius": 5,
            "steps": 10,
            "units": 'kilometers',
            "properties": {foo: 'bar'}
        });
    }

    function concave() {
        map.setView(L.latLng(44.645, -63.59), 14);
        var coordinatesArray = [
            [-63.601226, 44.642643],
            [-63.591442, 44.651436],
            [-63.580799, 44.648749],
            [-63.573589, 44.641788],
            [-63.587665, 44.64533],
            [-63.595218, 44.64765]
        ];
        var points = [];
        coordinatesArray.map(function (coordinates) {
            L.marker(coordinates).addTo(map);
            turfLayer.process("Helper.point", {
                "coordinates": coordinates,
            }, function (point) {
                points.push(point);
            });
        });
        turfLayer.process("Helper.featureCollection", {
            "features": points
        }, function (collection) {
            resultLayer.process("Transformation.concave", {
                "points": collection,
                "maxEdge": 1,
                "units": 'miles',
            });
        });
    }

    function convex() {
        map.setView(L.latLng(43.6, 10.3), 9);
        var coordinatesArray = [
            [10.195312, 43.755225],
            [10.404052, 43.8424511],
            [10.579833, 43.659924],
            [10.360107, 43.516688],
            [10.14038, 43.588348],
            [10.195312, 43.755225]
        ];
        var points = [];
        coordinatesArray.map(function (coordinates) {
            L.marker(coordinates).addTo(map);
            turfLayer.process("Helper.point", {
                "coordinates": coordinates,
            }, function (point) {
                points.push(point);
            });
        });
        turfLayer.process("Helper.featureCollection", {
            "features": points
        }, function (collection) {
            resultLayer.process("Transformation.convex", {
                "feature": collection
            });
        });
    }

    function difference() {
        map.setView(L.latLng(-24, 133), 4);
        turfLayer.process("Helper.polygon", {
            "coordinates": [[
                [128, -26],
                [141, -26],
                [141, -21],
                [128, -21],
                [128, -26]
            ]]
        }, function (polygon1) {
            turfLayer.process("Helper.polygon", {
                "coordinates": [[
                    [126, -28],
                    [140, -28],
                    [140, -20],
                    [126, -20],
                    [126, -28]
                ]]
            }, function (polygon2) {
                resultLayer.process("Transformation.difference", {
                    "polygon1": polygon1,
                    "polygon2": polygon2
                });
            });
        });
    }

    function dissolve() {
        map.setView(L.latLng(0, 0.5), 7);
        var polygons = [{
            "coordinates": [[[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]],
            "properties": {"combine": "yes"}
        }, {
            "coordinates": [[[0, -1], [0, 0], [1, 0], [1, -1], [0, -1]]],
            "properties": {"combine": "yes"}
        }, {
            "coordinates": [[[1, -1], [1, 0], [2, 0], [2, -1], [1, -1]]],
            "properties": {"combine": "no"}
        }];
        var features = [];
        polygons.map(function (polygon) {
            turfLayer.process("Helper.polygon", polygon, function (feature) {
                features.push(feature);
            });
        });
        turfLayer.process("Helper.featureCollection", {
            "features": features
        }, function (collection) {
            resultLayer.process("Transformation.dissolve", {
                "featureCollection": collection,
                "propertyName": 'combine'
            });
        });
    }

    function intersect() {
        map.setView(L.latLng(45.47, -122.6), 10);
        turfLayer.process("Helper.polygon", {
            "coordinates": [[
                [-122.801742, 45.48565],
                [-122.801742, 45.60491],
                [-122.584762, 45.60491],
                [-122.584762, 45.48565],
                [-122.801742, 45.48565]
            ]]
        }, function (polygon1) {
            turfLayer.process("Helper.polygon", {
                "coordinates": [[
                    [-122.520217, 45.535693],
                    [-122.64038, 45.553967],
                    [-122.720031, 45.526554],
                    [-122.669906, 45.507309],
                    [-122.723464, 45.446643],
                    [-122.532577, 45.408574],
                    [-122.487258, 45.477466],
                    [-122.520217, 45.535693]
                ]]
            }, function (polygon2) {
                resultLayer.process("Transformation.intersect", {
                    "poly1": polygon1,
                    "poly2": polygon2
                });
            });
        });
    }

    function simplify() {
        map.setView(L.latLng(-33.43, -70.65), 10);
        turfLayer.process("Helper.polygon", {
            "coordinates": [[
                [-70.603637, -33.399918],
                [-70.614624, -33.395332],
                [-70.639343, -33.392466],
                [-70.659942, -33.394759],
                [-70.683975, -33.404504],
                [-70.697021, -33.419406],
                [-70.701141, -33.434306],
                [-70.700454, -33.446339],
                [-70.694274, -33.458369],
                [-70.682601, -33.465816],
                [-70.668869, -33.472117],
                [-70.646209, -33.473835],
                [-70.624923, -33.472117],
                [-70.609817, -33.468107],
                [-70.595397, -33.458369],
                [-70.587158, -33.442901],
                [-70.587158, -33.426283],
                [-70.590591, -33.414248],
                [-70.594711, -33.406224],
                [-70.603637, -33.399918]
            ]]
        }, function (feature) {
            resultLayer.process("Transformation.simplify", {
                feature: feature,
                tolerance: 0.01,
                highQuality: false,
            });
        });
    }

    function tesselate() {
        map.setView(L.latLng(7, 15), 3);
        turfLayer.process("Helper.polygon", {
            "coordinates": [[
                [11, 0],
                [22, 4],
                [31, 0],
                [31, 11],
                [21, 15],
                [11, 11],
                [11, 0]
            ]]
        }, function (poly) {
            resultLayer.process("Transformation.tesselate", {
                poly: poly
            });
        });
    }

    function transformRotate() {
        map.setView(L.latLng(30.5, 1.8), 5);
        turfLayer.process("Helper.polygon", {
            "coordinates": [[
                [0, 29],
                [3.5, 29],
                [2.5, 32],
                [0, 29]
            ]]
        }, function (poly) {
            resultLayer.process("Transformation.transformRotate", {
                geojson: poly,
                angle: 10,
                pivot: [0, 25]
            });
        });
    }

    function transformTranslate() {
        map.setView(L.latLng(30.5, 1.8), 5);
        turfLayer.process("Helper.polygon", {
            "coordinates": [[
                [0, 29],
                [3.5, 29],
                [2.5, 32],
                [0, 29]
            ]]
        }, function (poly) {
            resultLayer.process("Transformation.transformTranslate", {
                geojson: poly,
                distance: 100,
                direction: 35
            });
        });
    }

    function transformScale() {
        map.setView(L.latLng(30.5, 1.8), 5);
        turfLayer.process("Helper.polygon", {
            "coordinates": [[
                [0, 29],
                [3.5, 29],
                [2.5, 32],
                [0, 29]
            ]]
        }, function (poly) {
            resultLayer.process("Transformation.transformScale", {
                geojson: poly,
                factor: 3
            });
        });
    }

    function union() {
        map.setView(L.latLng(35.6, -82.55), 13);
        turfLayer.process("Helper.polygon", {
            "coordinates": [[
                [-82.574787, 35.594087],
                [-82.574787, 35.615581],
                [-82.545261, 35.615581],
                [-82.545261, 35.594087],
                [-82.574787, 35.594087]
            ]]
        }, function (poly1) {
            turfLayer.process("Helper.polygon", {
                "coordinates": [[
                    [-82.560024, 35.585153],
                    [-82.560024, 35.602602],
                    [-82.52964, 35.602602],
                    [-82.52964, 35.585153],
                    [-82.560024, 35.585153]
                ]]
            }, function (poly2) {
                resultLayer.process("Transformation.union", {
                    A: [poly1, poly2],
                });
            })
        });
    }

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
        $("#model").on('shown.bs.modal', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        $("#model").on('hidden.bs.modal', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        })
    }
</script>
</body>
</html>